<template>
  <v-layout type="main">
    <div class="detail-layout">
      <el-form class="form myself-form alick-add-form" ref="form" :model="addForm" :rules="submitRules"
        label-width="120px">
        <div v-if="active == 1">
          <h3 class="add-alike-title">基本信息</h3>
          <!-- <el-form-item label="范围" prop="visibility">
            <el-radio-group v-model="addForm.visibility">
              <el-radio :label="0">私有的</el-radio>
              <el-radio :label="1">共享的</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="类型" prop="type">
            <el-radio v-model="addForm.is_webide" :label="true">VsCode</el-radio>
            <el-radio v-model="addForm.is_webide" :label="false">Jupyter</el-radio>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input type="text" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" :rows="3" v-model="addForm.desc" />
          </el-form-item>
          <el-form-item label="配图">
            <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar" @avatarPath="avatarPath" />
          </el-form-item>
          <el-form-item label="" prop="tensorboard">
            <el-checkbox v-model="addForm.tensorboard">tensorboard</el-checkbox>
          </el-form-item>
          <h3 class="add-alike-title">开发环境配置</h3>
          <div class="node-module">
            <h3 class="node-module-title">主节点</h3>
            <el-form-item label="环境" prop="mainNodeImageId">
              <el-cascader v-model="mainNode.image_group" :options="imageOptions" :show-all-levels="false"
                class="full-extent-select"></el-cascader>
            </el-form-item>
            <el-form-item label="资源组" prop="mainProduct">
              <el-select v-model="mainNode.product_id" prop="main_product" class="full-extent-select">
                <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="数量">
            <el-input-number size="mini" v-model="addForm.podNum"></el-input-number>
          </el-form-item> -->

            <div class="right-btn-box" v-if="slaveNodeList.length == 0">
              <span class="outin-handle">
                <a href="javascript:;" @click="addSlaveNode()">增加</a>
              </span>
            </div>
          </div>
          <div v-for="(tag, i) in slaveNodeList" :key="i">
            <div class="node-module">
              <h3 class="node-module-title">从节点</h3>
              <el-form-item label="环境" prop="slaveImage">
                <el-cascader v-model="tag.image_group" :options="imageOptions" :show-all-levels="false"
                  class="full-extent-select"></el-cascader>
              </el-form-item>
              <el-form-item label="资源组">
                <el-select v-model="tag.product_id" class="full-extent-select">
                  <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量">
                <el-input-number v-model="tag.pod_num"></el-input-number>
              </el-form-item>
              <div class="right-btn-box">
                <span class="outin-handle">
                  <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                  <a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
                </span>
              </div>
            </div>
          </div>

          <div v-if="advanced == true">
            <h3 class="add-alike-title">输入配置 </h3>
            <el-form-item label="数据集">
              <plug-dataset :dataset_list="dataset_list" @infoDataset="infoDataset" v-if="addForm.dataset_list" />
            </el-form-item>
            <el-form-item label="S3输入" v-if="s3_flag">
              <plug-s3 :in_s3_list="in_s3_list" @infoS3="infoInS3" v-if="in_s3_list" />
            </el-form-item>
            <el-form-item label="预训练模型">
              <plug-model :model_list="model_list" @infoModel="infoModel" v-if="model_list" />
            </el-form-item>
            <h3 class="add-alike-title">输出配置 </h3>
            <el-form-item label="S3输出" v-if="s3_flag">
              <plug-s3 :in_s3_list="out_s3_list" @infoS3="infoOutS3" v-if="out_s3_list" />
            </el-form-item>
            <el-form-item label="端口映射">
              <plug-port :port_list="port_list" @infoPort="infoPort" v-if="port_list" />
            </el-form-item>
          </div>
          <div class="right-btn-box">
            <span class="outin-handle">
              <a href="javascript:;" @click="setAdvanced()">高级设置</a>
            </span>
          </div>
          <el-form-item label=" ">
            <el-button class="none-type" type="primary" v-if="active == 1" @click="addNoteBook">确定</el-button>
          </el-form-item>
        </div>
        <div v-show="active == 2">
          <h1 class="succeed-hint">创建成功</h1>
          <div class="succeed-btn">
            <a href="javascript:;" class="start" @click="start">启动</a>
            <a href="javascript:;" class="go" @click="toDetail">立即前往</a>
          </div>
        </div>
      </el-form>
    </div>

  </v-layout>
</template>

<script>
import { getExperimentDetail, addExperiment, startExperiment } from '@/api/notebook'
import { getMarketAlgorithmVersionDetail } from '@/api/marketAlgorithmVersion'
import plugDataset from '@/components/module/plug-in-dataset'
import plugS3 from '@/components/module/plug-in-s3'
import plugModel from '@/components/module/plug-in-model'
import plugPort from '@/components/module/plug-in-port'
import { getAllProducts } from '@/api/product'
import { getAllImageGroups, getImageDetail } from '@/api/image'
import { mainImageRule, mainProductRule, slaveImageRule } from '@/utils/rule'
import { paramMap } from '@/utils/maps'
export default {
  data() {
    return {
      s3_flag: paramMap['s3_flag'],
      addForm: {
        is_webide: true,
        dataset_list: [],
        name: "",
        desc: "",
      },
      active: 1,
      dataset_list: [],
      in_s3_list: [],
      model_list: [],
      out_s3_list: [],
      port_list: [],
      advanced: false,
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        commit_msg: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        main_image_id: [
          { required: true, message: "该项为必填项" },
        ],
        main_product: [
          { required: true, message: "该项为必填项" },
        ],
        mainNodeImageId: [
          { required: true, validator: mainImageRule.bind(this, this), trigger: 'change' }
        ],
        mainProduct: [
          { required: true, validator: mainProductRule.bind(this, this), trigger: 'change' }
        ],
        tagImageId: [
          { required: true, validator: slaveImageRule.bind(this, this), trigger: 'change' }
        ],
        // port: [
        //   { required: true, message: "请填写端口" },
        // ]
      },
      mainNode: { pod_num: 1, type: 0 },
      slaveNodeList: [],
      imageOptions: [],
      productOptions: [],
      bizId: "",
      algorithmVersion_id: this.$route.query.algorithmVersion_id,
      algorithm_name: this.$route.query.algorithm_name,
      algorithm_desc: this.$route.query.algorithm_desc,
      algorithm_avatar: this.$route.query.algorithm_avatar,
    };
  },
  components: {
    plugDataset,
    plugS3,
    plugModel,
    plugPort
  },
  async created() {
  },
  async mounted() {
    this.getAllImageGroups()
    this.getProductList()
    this.getData()
    this.$forceUpdate();
  },
  methods: {
    async setAddForm() {
      this.addForm.fork_from = this.algorithmVersion_id
      this.addForm.node_group_list = []
      this.mainNode.type = 1
      this.mainNode.image_id = this.mainNode.image_group[2]
      this.addForm.node_group_list.push(this.mainNode)
      for (let i = 0; i < this.slaveNodeList.length; i++) {
        this.slaveNodeList[i].type = 2
        this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2]
        this.addForm.node_group_list.push(this.slaveNodeList[i])
      }
      this.addForm.s3_list = []
      for (let i = 0; i < this.in_s3_list.length; i++) {
        this.in_s3_list[i].type = 0
        this.addForm.s3_list.push(this.in_s3_list[i])
      }
      for (let i = 0; i < this.out_s3_list.length; i++) {
        this.out_s3_list[i].type = 1
        this.addForm.s3_list.push(this.out_s3_list[i])
      }
      console.log("print port_list", this.port_list)
      this.addForm.port_list = []
      for (let i = 0; i < this.port_list.length; i++) {
        this.addForm.port_list.push(this.port_list[i])
      }
      this.addForm.dataset_list = []
      for (let i = 0; i < this.dataset_list.length; i++) {
        this.addForm.dataset_list.push(this.dataset_list[i])
      }
      this.addForm.model_list = []
      for (let i = 0; i < this.model_list.length; i++) {
        this.addForm.model_list.push(this.model_list[i])
      }
    },
    async getAddForm(data) {
      this.addForm = data
      this.port_list = []
      this.slaveNodeList = []
      this.in_s3_list = []
      this.out_s3_list = []
      this.model_list = []
      this.dataset_list = []
      for (let node of data.node_group_list) {
        if (node.type == 1) {
          this.mainNode = node
          let res = await getImageDetail({ id: this.mainNode.image_id })
          let mainImage = res.data
          this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id]
        } else {
          let res = await getImageDetail({ id: node.image_id })
          let slaveImage = res.data
          let slaveNode = node
          slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id]
          this.slaveNodeList.push(slaveNode)
        }
      }
      if (data.s3_list.length > 0)
        for (let s3 of data.s3_list) {
          if (s3.type == 0) {
            this.in_s3_list.push(s3)
          }
          else {
            this.out_s3_list.push(s3)
          }
        }
      if (data.port_list) {
        this.port_list = data.port_list
      }
      if (data.model_list) {
        this.model_list = data.model_list
      }
      if (data.dataset_list) {
        this.dataset_list = data.dataset_list
      }
      if (this.dataset_list.length > 0
        || this.in_s3_list.length > 0
        || this.out_s3_list.length > 0
        || this.model_list.length > 0
        || this.port_list.length > 0) {
        this.advanced = true
      }
      this.$forceUpdate()
    },
    setAdvanced() {
      this.advanced = !this.advanced
    },
    avatarPath(data) {
      this.addForm.avatar = data;
    },
    async getData() {
      if (this.$route.query.id) {
        let res = await getExperimentDetail({ id: this.$route.query.id })
        this.getAddForm(res.data)
      }
      else if (this.algorithmVersion_id) {
        let res = await getMarketAlgorithmVersionDetail({ id: this.algorithmVersion_id })
        this.getAddForm(res.data)
        this.addForm.name = this.algorithm_name
        this.addForm.desc = this.algorithm_desc
        this.addForm.avatar = this.algorithm_avatar
        this.addForm.is_webide = true
        this.addForm = JSON.parse(JSON.stringify(this.addForm))
      }
    },
    start() {
      startExperiment({ id: this.addForm.id });
    },
    toDetail() {
      console.log('addForm', this.addForm)
      let query = {
        id: this.addForm.id
      }
      this.$router.push({
        path: '/notebook/code',
        query
      })
    },
    infoDataset(datasets) {
      this.dataset_list = []
      datasets.forEach(e => {
        e.dataset_id = e.id
        e.dataset = {
          name: e.name,
          alias: e.alias,
          id: e.id
        }
      })
      this.dataset_list = datasets
      console.log('infoDataset', datasets)
    },
    infoInS3(s3s) {
      this.in_s3_list = s3s
    },
    infoOutS3(s3s) {
      this.out_s3_list = s3s
    },
    infoModel(models) {
      this.model_list = []
      console.log("modes", models)
      // models.forEach(e => { e.model_version_id = e.version.id
      //   e.model_id = e.id })
      this.model_list = models
    },
    infoPort(ports) {
      this.port_list = ports
      console.log(this.port_list)
    },
    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },

    succeedOver(data) {
      console.log(data)
    },

    addSlaveNode() {
      let data = { type: 1, pod_num: 1 }
      this.slaveNodeList.push(data)
    },
    delSlaveNode(i) {
      this.slaveNodeList.splice(i, 1)
    },
    async getAllImageGroups() {
      let res = await getAllImageGroups()
      this.imageOptions = res.data
    },
    addNoteBook() {
      this.setAddForm()
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.addForm.id = null;
          let res = await addExperiment(this.addForm);
          this.bizId = res.data.id
          this.getAddForm(res.data)
          if (res && res.data) {
            this.active = 2;
          }
        }
      })
    }
  },


}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>
